<template>
	<div class="container">
		<!-- 头部 -->
		<div class="messgae-detail-header drag">
			wifi歪f
		</div>
		<!-- 聊天内容容器 -->
		<main ref="mainContent">
			<div class="messgae-content">
				<div class="message-item" v-for="(item, index) in messageStore.messageChatList" :key="index">
					<!-- 消息时间 -->
					<div class="message-time" v-if="index === 0 ? true : messageStore.messageChatList[index - 1].time !== item.time">{{
						item.time }}</div>
					<!-- 自己的消息 -->
					<div class="message-my" v-if="item.type === 0">
						<div class="message-text-warp">
							<div class="message-text my">
								{{ item.message }}
							</div>
						</div>
						<div class="user-pic">
							<img src="@/assets/images/user.png" alt="" />
						</div>
					</div>
					<!-- 对方消息 -->
					<div class="message-friend" v-else>
						<div class="user-pic">
							<img src="@/assets/images/user.png" alt="" />
						</div>
						<div class="message-text-warp">
							<div class="message-text friend">
								{{ item.message }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</main>
		<!-- 底部消息编辑框 -->
		<div class="message-edit-bottom">
			<BottomInput @handleSendMessage="handleSendMessage" />
		</div>
	</div>
</template>

<script setup lang="ts">
import BottomInput from '@/components/BottomInput/index.vue'
import { nextTick, ref, watch, getCurrentInstance } from "vue"
import { formatTime } from '@/utils/formatTime'
// pinia
import { useUserInfoStore } from "@/store/modules/user"
import { useMessageStore } from '@/store/modules/message'
import type { MessageType } from '@/store/modules/interface/messageType'
// route
import { useRoute } from 'vue-router'
// pinia
const userInfoStore = useUserInfoStore()
const messageStore = useMessageStore()
// route
const $route = useRoute()
// socket
const { proxy } = getCurrentInstance() as any

// type MessageType = {
// 	userId: {
// 		_id: string;
// 		nick: string;
// 		imgUrl: string;
// 	},
// 	/*
// 		type: 0 => 自己的消息  1 => 对方的消息
// 		msgType: 0 => 文字消息  1 => 图片消息
// 	*/
// 	type: number;
// 	time: string | Date;
// 	msgType: number;
// 	message: string;
// }
// const messageChatList = ref<MessageType[]>([])

// 获取dom
const mainContent = ref()
watch(messageStore.messageChatList, () => {
	nextTick(() => {
		mainContent.value.scrollTop = mainContent.value.scrollHeight
	})
}, { immediate: true })

// 发送按钮事件回调
const handleSendMessage = (msg: string) => {
	const { _id, nick, imgUrl } = userInfoStore.userInfo
	let data: MessageType = {
		userId: {
			_id, nick, imgUrl,
		},
		type: 0,
		time: formatTime(new Date),
		msgType: 0,
		message: msg,
	}
	// 发送者id
	let uId = _id
	// 接收者id
	let toId = $route.query.id
	messageStore.messageChatList.push(data)
	proxy.socket.emit('private_chat', data, uId, toId)
}
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.messgae-detail-header {
		width: 100%;
		height: 50px;
		padding: 0 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 18px;
		border-bottom: 1px solid #e9e9e9;
	}

	.message-edit-bottom {
		width: 100%;
		height: 200px;
		border-top: 1px solid #e9e9e9;
		padding: 10px 15px;
		box-sizing: border-box;
	}
}

main {
	width: 100%;
	flex: 1;
	overflow: auto;

	.messgae-content {
		width: 100%;
		padding: 15px 20px 0;
		box-sizing: border-box;

		.message-item {
			width: 100%;

			.message-time {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-bottom: 20px;
				font-size: 13px;
				color: #b0b0b0;
			}

			.message-my,
			.message-friend {
				width: 100%;
				display: flex;
				margin-bottom: 25px;

				.user-pic {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.message-text-warp {
					margin: 0 10px;

					.message-text {
						max-width: 55vw;
						padding: 10px;
						box-sizing: border-box;
						border-radius: 10px;
						line-height: 22px;
						font-size: 15px;
					}

					.friend {
						background-color: #fff;
					}

					.my {
						background-color: #0091ff;
						color: #fff;
					}
				}
			}

			.message-my {
				justify-content: flex-end;
			}
		}
	}
}
</style>